<!doctype html>  
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Lettering.js Examples</title>
  <meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more.">
  <meta name="author" content="Dave Rupert">

  <meta name="viewport" content="width=device-width; initial-scale=1.0">
	<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
	
	<style type="text/css" media="screen">
		.demo {
			padding: 50px;
			border:1px solid #ccc;
			font-weight:bold;
			color: red;
			background:#d0d0d0;
			font-size:20px;
			line-height:1.5;
			text-align:center;
		}
	
		.demo h1 { font-size:72px;  text-transform:uppercase; margin-bottom:0px;}
		.char2,
		#demo2 .word2,
		.line2 { color: orange; }
		.char3,
		.word3,
		.line3 { color: yellow; }
		.char4,
		.line4 { color: blue; }
		.char5 { color: green; }
		.char6 { color: indigo; }
		.char7 { color: violet; }
	</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="../jquery.lettering.js"></script>
  <script>
  	$(document).ready(function() {
			$("#demo1 h1").lettering();
			$("#demo2 h1").lettering('words');
			$("#demo3 p").lettering('lines');
			$("#demo4 h1").lettering('words').children("span").lettering();
			$("#demo5 h1").lettering().children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});
		});
  </script>

</head>

<body>

  <div id="container">
    <header>
			<h1 id="thebrand">Lettering.JS</h1>
			<p>The following are some hokey examples of how you can implement LETTERING.JS.
    </header>
    
    <article id="main">
			<section id='lettering-demo'>
				<h2>Letters</h2>
				<h4>The HTML</h4>
<pre><code>	&lt;div id=&quot;demo1&quot; class=&quot;demo&quot;&gt;
&nbsp;&nbsp;&lt;h1&gt;Rainbow&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

<h4>The jQuery</h4>
<pre><code>$(document).ready(function() {
&nbsp;&nbsp;$("#demo1 h1").lettering();
});
</code></pre>

				<h4>The Result</h4>
				<div id="demo1" class="demo">
					<h1>Rainbow</h1>
				</div>
				
			</section>

			<section id='words-demo'>
				<h2>Words</h2>
				<code><pre>$("#demo2 h1").lettering('words');</pre></code>

			<h4>The Result</h4>
				<div id="demo2" class="demo">
					<h1>Hi, Multi Color</h1>
				</div>
			</section>

			<section id='lines-demo'>
				<h2>Lines</h2>
				<code><pre>$("#demo3 p").lettering('lines');</pre></code>

			<h4>The Result</h4>
				<div id="demo3" class="demo">
					<p>This is an amazing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>
				</div>
			</section>

			<section id='advanced1-demo'>
				<h2>Advanced #1: Chaining 2 Methods</h2>
<code><pre>$("#demo4 h1").lettering('words').children("span").lettering();</pre></code>
			<h4>The Result</h4>
				<div id="demo4" class="demo">
					<h1>Double Rainbow</h1>
				</div>
			</section>

			<section id='advanced2-demo'>
				<h2>Advanced #2: Chaining and Styling</h2>
<code><pre>$("#demo5 h1").lettering()
	.children("span").css({'display':'inline-block', '-webkit-transform':'rotate(-25deg)'});</pre></code>
			<h4>The Result</h4>
				<div id="demo5" class="demo">
					<h1>WOOOoo!</h1>
				</div>
			</section>

    </article>
    
    <footer>
			<p>&copy;2010 Dave Rupert <a href="http://daverupert.com">http://daverupert.com</a>
    </footer>
  </div> 

</body>
</html>
